﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="preload" href="/img/cookie-filled.svg" as="image" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=optional" as="style">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=optional">
    <link href="style/main.css?cache=6" rel="stylesheet" />

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
	<meta name="description" content="Cookie-Editor is a browser extension/add-on that lets you efficiently create, edit and delete cookies for the current tab. Perfect for developing, quickly testing or even manually managing your cookies for your privacy.">
	<link rel="canonical" href="https://cookie-editor.com/">

    <title>Cookie-Editor - A safe cookie editor for Chrome, Firefox, Safari, Edge and Opera</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <header>
        <div class="wrapper">
            <a href="/" title="Go to homepage" class="logo">
                <img src="img/cookie-filled.svg" alt="Cookie-Editor Logo" height="50" width="50" />
                <h1>Cookie-Editor</h1>
            </a>
            <a href="./#download" class="btn-cta btn-md" id="download-cta-med">Install Now</a>
        </div>
    </header>

    <div id="main-content">
        <div id="catch" class="block">
            <h1>Cookie-Editor - Simple, secure and open-source.</h1>
            <h2>Your privacy is important.</h2>
            <div class="catch-btns">
                <div>
                    <a href="#download" class="btn-cta" id="download-cta">Install Now</a>
                    <p id="cur-version"> </p>
                </div>
                <div>
                    <a href="https://github.com/moustachauve/cookie-editor" class="btn-cta secondary" id="source-cta">View Source</a>
                    <p>Github (moustachauve/cookie-editor)</p>
                </div>
            </div>
        </div>
        <div id="access" class="block block-small">
            <div id="access-list">
                <div>
                    <img src="img/from-toolbar.png" alt="Access your cookies directly from your toolbar" width="230" height="220" />
                    <div class="description">From your Toolbar</div>
                </div>
                <div>
                    <img src="img/from-devtools.png" alt="Access your cookies directly from your DevTools" width="230" height="220" />
                    <div class="description">From your DevTools</div>
                </div>
                <div>
                    <img src="img/from-android.png" alt="Access your cookies directly from your Android phone" width="230" height="220" />
                    <div class="description">From your Phone</div>
                </div>
            </div>
        </div>

	    <div id="description" class="block block-small">
		    <p>
			    Cookie-Editor is a browser extension focused on <strong>productivity</strong> that helps you manage your cookies with the least amount of clicks possible.
			    You can access the list of all the cookies on the current page, create or modify an existing cookie and delete a cookie in a maximum of three clicks.
			    Cookie-Editor also gives you the option to import cookies or export them directly to your clipboard for easy sharing or saving of your cookies.
		    </p>
		    <p>
			    This extension is ideal for a wide range of application.
			    It can optimize your development time when working on a web page, it can be useful to test a website when doing <strong>software quality assurance</strong> and it could event benefit a <strong>SEO expert</strong>.
			    It can also be used to manually manage cookies.
		    </p>
		    <p>
			    Cookie-Editor is available on most major browser.
                You can install it on <strong>Firefox</strong>, <strong>Safari</strong>, <strong>Microsoft Edge</strong> and on all Chromium based browser, like <strong>Google Chrome</strong>, <strong>Opera</strong> and <strong>Vivaldi</strong>.
		    </p>
            <p>
                You can even manage your cookies directly on your phone or tablet. Cookie-Editor is available on many mobile browsers and has an interface optimised for touchscreens. This includes Firefox for Android, Safari for iOS and Edge for both Android and iOS.
            </p>
	    </div>

        <div id="features" class="block block-small">
            <h2>Cookie-Editor Is Really Simple to Use</h2>
            <div class="grid">
                <div>
                    <button class="img-preview">
                        <img src="img/cookie-list.png" alt="View a list of all your cookies in a simple interface" width="400" height="197" />
                    </button>
                    <div class="description">
                        View a list of all the cookies
                    </div>
                </div>
                <div>
                    <button class="img-preview">
                        <img src="img/cookie-add.png" alt="Quickly create a new cookie for the current page" width="400" height="200" />
                    </button>
                    <div class="description">
                        Create a new Cookie
                    </div>
                </div>
                <div>
                    <button class="img-preview">
                        <img src="img/cookie-edit.png" alt="Edit the information of an existing cookie on the current page" width="400" height="200" />
                    </button>
                    <div class="description">
                        Edit an existing cookie
                    </div>
                </div>
                <div>
                    <button class="img-preview">
                        <img src="img/cookie-delete.png" alt="Easily delete a cookie from the current page" width="400" height="197" />
                    </button>
                    <div class="description">
                        Delete one or all cookies
                    </div>
                </div>
                <div>
                    <button class="img-preview">
                        <img src="img/cookie-import.png" alt="Import and export your cookies to a file" width="400" height="197" />
                    </button>
                    <div class="description">
                        Export and Import Cookies
                    </div>
                </div>
            </div>
        </div>

        <div id="download" class="block" >
            <h2>Get Cookie-Editor Now</h2>
            <h3>Cookie-Editor is available on Google Chrome, Firefox, Safari, Edge and Opera.</h3>
            <p>A mobile version is available for Firefox on Android, Safari on iOS and Edge on both Android and iOS.</p>
            <div id="browser-install-list">
                <div>
                    <img src="img/chrome-logo.svg" alt="Available for Chrome" width="215" height="150" />
                    <a href="https://chrome.google.com/webstore/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm?utm_campaign=cgagnier.ca" 
                        class="btn-cta" data-target="chrome">
                        Chrome
                    </a>
                </div>
                <div>
                    <img src="img/firefox-logo.svg" alt="Available for Firefox" width="215" height="150" />
                    <a href="https://addons.mozilla.org/addon/cookie-editor?utm_campaign=external-cookie-editor.com"
                        class="btn-cta" data-target="firefox">
                        Firefox
                    </a>
                </div>
                <div>
                    <img src="img/safari-logo.svg" alt="Available for Safari" width="215" height="150" />
                    <a href="https://apps.apple.com/app/apple-store/id6446215341?pt=126143671&ct=cgagnier.ca&mt=8" 
                        class="btn-cta" data-target="safari">
                        Safari
                    </a>
                </div>
                <div>
                    <img src="img/edge-logo.svg" alt="Available for Edge" width="215" height="150" />
                    <a href="https://microsoftedge.microsoft.com/addons/detail/cookieeditor/neaplmfkghagebokkhpjpoebhdledlfi" 
                        class="btn-cta" data-target="edge">
                        Edge
                    </a>
                </div>
                <div>
                    <img src="img/opera-logo.svg" alt="Available for Opera" width="215" height="150" />
                    <a href="https://addons.opera.com/en/extensions/details/cookie-editor-2/" 
                        class="btn-cta" data-target="opera">
                        Opera
                    </a>
                </div>
            </div>
        </div>

        
        <div class="block ad-container">
            
            <div class="ad">
                <img src="img/digitalocean-vertical.svg" alt="Digital Ocean Logo" />
                <div>
                    <h3><a href="https://digitalocean.pxf.io/k0BxXd" class="ads-link" data-ad="tab-for-cause">DigitalOcean</a></h3>
                    <p>
                        Cookie-Editor is supported by: DigitalOcean
                    </p>
                    <p>
                        Thanks to DigitalOcean for supporting open-source software.
                    </p>
                    <a href="https://digitalocean.pxf.io/k0BxXd" class="btn-cta btn-sm ads-link" data-ad="digitalocean">
                        Learn more
                    </a>
                </div>
            </div>

            <div class="ad">
                <img src="img/tab-for-cause.png" alt="Tab for cause logo" />
                <div>
                    <h3><a href="https://tab.gladly.io/cookieeditor/" class="ads-link" data-ad="tab-for-cause">Tab for a Cause</a></h3>
                    <p>
                        Raise money for charity every time you open a new browser tab.
                    </p>
                    <p>
                        It's free and incredibly easy. Transform your tabs into a force for good in 30 seconds.
                    </p>
                    <a href="https://tab.gladly.io/cookieeditor/" class="btn-cta btn-sm ads-link" data-ad="tab-for-cause">
                        Get Tab for a Cause
                    </a>
                </div>
            </div>
        </div>

        <div id="contribution" class="block">
            <div id="github-block">
                    <svg><use xlink:href="img/github-logo.svg#github"></use></svg>
                <div>
                    <h3>
                        <a href="https://github.com/moustachauve/" title="Moustachauve's Github Profile">Moustachauve</a>
                        /
                        <a href="https://github.com/moustachauve/cookie-editor" title="Cookie-Editor repository">Cookie-Editor</a>
                    </h3>
                    <p>
                        You can find the source code of this project on Github. Contribute as you desire to the project. All the
                        help is appreciated.
                    </p>
                </div>
            </div>
            <div id="suggestions-block">
                <div class="image">
                    <svg><use xlink:href="img/fa-solid.svg#bug"></use></svg>
                </div>
                <div class="text">
                    <h2>Suggestions or Bug Report</h2>
                    <p>
                        Please create an issue on the Github issue tracker for any suggestion or bug report. 
                        It will be resolved as fast as possible.
                    </p>
                    <a href="https://github.com/Moustachauve/cookie-editor/issues" class="btn-cta btn-sm">
                        <svg><use xlink:href="img/github-logo.svg#github"></use></svg>Create an Issue
                    </a>
                </div>
            </div>
        </div>

        <footer class="block">
            <p>
                Cookie-Editor is developed by <a href="https://cgagnier.ca/" title="Personal Site">Christophe Gagnier</a>, known as
                <a href="https://github.com/Moustachauve/" title="Github Profile">
                    <svg class="inline-icon"><use xlink:href="img/github-logo.svg#github"></use>
                    </svg>Moustachauve</a>.
            </p>
            <p>
                <a href="https://github.com/sponsors/Moustachauve" title="Sponsor link">
                    <svg class="inline-icon"><use xlink:href="img/fa-solid.svg#coffee"></use>
                    </svg>Buy me a coffee</a> through Github Sponsor.
            </p>
			<p>Read my <a href="privacy.html" title="Privacy Policy">Privacy Policy</a>.</p>
            <p class="copyright">Copyright © 2023 Christophe Gagnier</p>
        </footer>
    </div>

    <div id="img-preview">
	    <div class="container">
		    <img src="img/cookie-list.png" alt="Image Preview" width="516" height="250" />
		    <div class="description"></div>
	    </div>
    </div>

    <script>
        const imgPreview = document.getElementById('img-preview');

        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        document.querySelectorAll('.img-preview').forEach(anchor => {
            anchor.addEventListener('click', function (e) {

                const parent = e.target.closest('div');
                const imgUrl = parent.querySelector('img').src;
                const description = parent.querySelector('.description').textContent.trim();

                imgPreview.querySelector('img').src = imgUrl;
                imgPreview.querySelector('.description').textContent = description;
                imgPreview.classList.add('visible');
            });
        });

        imgPreview.addEventListener('click', function (e) {
            if (e.target !== imgPreview) {
                return;
            }
            hideImgPreview();
        });

        imgPreview.addEventListener('transitionend', function () {
            console.log('transition over');
            if (imgPreview.classList.contains('hiding')) {
                imgPreview.classList.remove('hiding');
            }
        });

	    function hideImgPreview() {
            imgPreview.classList.add('hiding');
            imgPreview.classList.remove('visible');
	    }

        function setGithubRelease() {
            const key = "github-version"
            const cachedStr = localStorage.getItem(key);
            const htmlElement = document.getElementById('cur-version');
            if (cachedStr) {
                const cached = JSON.parse(cachedStr);
                const now = new Date();
                if (now.getTime() < cached.expiry) {
                    console.log("cached!")
                    htmlElement.innerText = cached.text;
                    return;
                }
            }

            fetchGithubRelease().then((data) => {
                console.log(data);
                const now = new Date();
                const cached = {
                    expiry: now.getTime() + 3600,
                    text: `${data.name} - released ${data.published_at.substring(0, 10)}`
                };
                localStorage.setItem(key, JSON.stringify(cached));
                htmlElement.innerText = cached.text;
            })
        }

        async function fetchGithubRelease() {
            let apiUrl = "https://api.github.com/repos/moustachauve/cookie-editor/releases/latest"
            const response = await fetch(apiUrl);
            return response.json();
        }

        if (document.readyState !== 'loading') {
            setGithubRelease();
        } else {
            document.addEventListener('DOMContentLoaded', setGithubRelease);
        }
    </script>
</body>
</html>
